<template>
  <div style="border: 1px solid #ccc; text-align: left;">

    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        @onChange="change"
        style="height: 400px; overflow-y: hidden"
        v-model="html"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
    />
  </div>
</template>

<script>
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";

export default {
  components: {Editor, Toolbar},
  data() {
    return {
      editor: null,
      html: "",
      filePath: '',
      toolbarConfig: {
        insertKeys: {
          index: 21, // 自定义插入的位置
          keys: ["uploadAttachment"], // “上传附件”菜单
        },
        //菜单不展示的配置可以在这里添加，如果不知道可以在下面methods方法中打印菜单配置出来看
        excludeKeys: [
          "video",
          "emotion",
          "insertVideo",
          "group-video",
          "fullScreen",
          "insertImage",
          "todo",
          "insertTable",
          "codeSelectLang",
          "codeBlock",
          "code",
          "uploadVideo",
          "editVideoSize",
          "viewLink",
          "divider",
          "splitLine",
        ],
        browerConnection: null,
      },
      editorConfig: {
        // placeholder: "请输入内容...",
        MENU_CONF: {
          uploadAttachment: {
            server: "api/file-load/attachments", // 服务端地址
            timeout: 5 * 1000, // 5s
            fieldName: "file",
            meta: {token: "xxx", a: 100}, // 请求时附加的数据
            metaWithUrl: true, // meta 拼接到 url 上
            headers: {
              token: window.localStorage.getItem("token"),
            },
            onFailed(file, res) {
              console.log(res.data)
              // alert(res.message);
              console.log("onFailed", file, res);
            },

            onError(file, err, res) {
              alert(err.message);
              console.error("onError", file, err, res);
            },
            onBeforeUpload(file) {
              // 判断前面是否有空行
              return file; // 上传 file 文件
            },
            // 上传成功后，用户自定义插入文件
            // onSuccess(file, res) {          // JS 语法
            //   console.log(`${file.name} 上传成功`, res)
            // },

            customInsert(res, file, insertFn) {
              // const { url } = res.data || {}
              // if (!url) throw new Error(`url is empty`)
              // 插入附件到编辑器
              // console.log(res.data)
              insertFn(file.name, `/dfs/${res.data}`);
              // return res.data;
            },
          },
        },
      },
      mode: "default", // or 'simple',
    };
  },
  methods: {
    change() {
      // console.log(this.html)

      this.$emit('update', this.html)
    },

    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      // console.log("Editor菜单配置", this.editor.getAllMenuKeys());
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      // this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
    }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>

<style scoped>

</style>